<template>
  <div class="addequip">
    <div style="height: 20px;background: #1E82D2 ;"></div>
    <!--<mt-header title="设备添加"  style='background: #1E82D2;font-size: 1.125rem;height: 3rem;' >
			  <router-link to="/applyallocation" slot="left">
			     <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
			  </router-link>
			</mt-header>-->
    <x-header class='head' :left-options="{backText: ''}">设备添加</x-header>

    <div class="apply">
      <div class="apply-title">
        设备明细
      </div>

      <group gutter='0px'>
        <popup-picker class='popup' title="设备类型" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
        <popup-picker class='popup' title="设备名称" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
        <cell class='popup' title="厂家型号" value="请选择厂家型号">
          <router-link :to="{path:'/factory'}" style='color: #999;'>请选择厂家型号</router-link>
        </cell>
        <cell class='popup' title="物料号" value="请选择物料号">
          <router-link :to="{path:'/materiel'}" style='color: #999;'>请选择物料号</router-link>
        </cell>
        <popup-picker class='popup' title="设备单位" :data="list3" v-model="value3" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
        <x-input class='popup' title="申请数量" v-model="value"></x-input>
        <x-textarea class='popup' title="备注:" placeholder='备注'></x-textarea>
      </group>
    </div>

    <button class="queren">确定</button>

  </div>
</template>

<script>
import PopupPicker from 'vux/src/components/Popup-picker/index'
import Group from 'vux/src/components/group/index'
import XInput from 'vux/src/components/x-input/index'
import XTextarea from 'vux/src/components/x-textarea/index'
import Datetime from 'vux/src/components/datetime/index'
import { Cell, XHeader} from 'vux'

export default {
  data() {
    return {
      value: '',
      valuedata: '2015-11-12',
      value1: ['请选择设备类型'],
      value2: ['请选择设备名称'],
      value3: ['请选择设备单位'],
      value4: ['请选择工程项目'],
      list1: [['主机', '主机配件', '111', '222', '333']],
      list2: [['主机', '主机配件', '111', '222', '333']],
      list3: [['在用', '闲置']],
      list4: [['主机', '主机配件', '111', '222', '333']],
    }
  },
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XHeader,
  },
  methods: {
    onChange(val) {
      console.log('val change', val)
    },
    change(value) {
      console.log('change', value)
    },
    onShow() {
      console.log('on show')
    },
    onHide(type) {
      console.log('on hide', type)
    },
  },
}
</script>

<style scoped>
.apply {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 20.5rem;
}
.apply-c {
  padding: 0.5rem;
}
.apply-title {
  line-height: 2rem;
  font-size: 0.8rem;
  padding-left: 15px;
  background: #f8f6f7;
  border-radius: 6px 6px 0 0;
}
.choice {
  width: 100%;
  height: 2rem;
  background: #fff;
}
.choice-c {
  color: #606063;
}
.choice span {
  line-height: 2rem;
  font-size: 0.8rem;
  float: left;
  width: 40%;
}
.choice-k {
  width: 60%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
}
.choice-k option {
  font-size: 0.8rem;
}
.choice-c input {
  border: none;
  float: right;
  width: 57.6%;
  height: 2rem;
  font-size: 0.8rem !important;
  color: #606063;
  float: left;
}
.adress {
  height: 4.5rem;
}
.choice-d {
  width: 57.5%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  font-size: 0.8rem;
}
.queren {
  width: 100%;
  height: 2.5rem;
  position: fixed;
  bottom: 0;
  background: #4a82c6;
  color: #fff;
  border: none;
}
.text {
  float: left;
  width: 58.5%;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
  margin-top: 0.5rem;
}
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
}
.head {
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
}
.popup {
  font-size: 0.8rem !important;
  color: #606063 !important;
}
</style>